<template>
	<view style="">
		<view style="width: 100%;height: 98rpx;background-color: #F5F3F3;z-index: 999;padding: 30rpx;margin-top: -10rpx;">
			
			<view style="height: 60rpx;margin-top:-7rpx;z-index: 9999;" @click="gosearch()">
				<u-search  shape="square" :placeholder="placeholder" v-model="keyword"
					@search="search(keyword)" @custom="search(keyword)" color="#666666" bg-color="#FFFFFF" :show-action="true" action-text="搜索" :action-style="{color:'#EA5344'}">
				</u-search>
			</view>
			
		</view>
		<!-- <view style="padding: 20rpx;background-color: #F5F3F3;">
			<u-search action-text="取消" shape="square" :placeholder="placeholder" v-model="keyword"
				@search="search(keyword)" @custom="cancel" color="#666666" bg-color="#FFFFFF">
			</u-search>
		</view> -->
		<view v-if="isSearch ==false" style="margin-top: 20rpx;padding: 20rpx;background-color: #FFFFFF;">
			<view style="margin-bottom: 20rpx;">
				<u-row gutter="12">
					<u-col span="9" @click="chooseLocation">
						<view>
							<text style="font-size: 28rpx;">历史搜索</text>
						</view>
					</u-col>
					<u-col span="3">
						<view style="float: right;" @click="delsearch">
							<u-icon name="trash" size="35"></u-icon>
						</view>
					</u-col>
				</u-row>
			</view>
			<u-line color="#ececec" />
			<u-cell-group :border="false">
				<u-cell-item v-for="(item,indexb) in searchlist" :key="indexb" icon="clock" :icon-style="iconstyle"
					:title="item.keyword" :arrow="false" @click="search(item.keyword)"></u-cell-item>
			</u-cell-group>
		</view>
		<view v-else class="">
			<view v-if="type == 'video'" style="margin-top: 0rpx;padding: 20rpx;background-color: #FFFFFF;">


				<view style="margin-top: 0rpx;" v-for="(item,index) in VideoList" :key="index">
					<view style="display: inline-flex;height: 150rpx;width: 210;">
						<u-image v-cloak width="150rpx" height="210rpx" :src="item.smallPhoto" border-radius="7"
							@click="govideoinfo(item)">
						</u-image>
						<view style="display: block;width: 385rpx;height: 210rpx;margin-left: 15rpx;"
							@click="govcinema(item)">
							<view class="videoinfo" style="width: 400rpx;">
								<text class="index-name-1">{{item.name}}</text>
								<view v-if="item.type.split(',').length >1" class="index-name-4">
									<text class="index-name-2">
										{{item.type.split(',')[0]}} </text>
									<text class="index-name-3">
										{{item.type.split(',')[1]}} </text>
								</view>
							</view>
							<view v-if="item.grade>0" class="videoinfo">
								<text style="color:#82848A;">评分</text>
								<text class="index-grade-1">{{item.grade}}</text>
							</view>
							<view v-else class="videoinfo">
								<text style="color:#82848A;">暂无评分</text>
							</view>
							<view class="videoinfo">
								<text style="color:#82848A;">导演：{{item.director | formatA}}</text>
							</view>
							<view class="videoinfo" style="width:400rpx;">

								<text v-if="item.mainPerformer!=''"
									style="color:#82848A;">主演：{{item.mainPerformer | formatA}}</text>
								<text v-else style="color:#82848A;">暂无主演信息</text>
							</view>

						</view>
						<view v-if="item.filmStatus=='Y'">
							<u-button v-cloak :custom-style="customStyle" @click="govcinema(item)">购票</u-button>
						</view>
					</view>
					<u-line color="#787878" margin="20rpx 0rpx"></u-line>
				</view>
				<view v-if="shownull1" style="margin-top: 30rpx;">
					<u-empty text="未搜索到影片信息" mode="list"></u-empty>
				</view>
			</view>
			<view v-else style="margin-top: 0rpx;padding: 20rpx;background-color: #FFFFFF;">

				<view style="margin-top: 15rpx;" v-for="(item,index) in yylist" :key="index" @click="goInfo(item)">
					<view style="display: block;">
						<view style="width: 100%;display: flex;" >
							<view style="width: 550rpx;">
								<text class="hide"
									style="font-weight: 500;font-size: 32rpx;color: color: rgba(0, 0, 0, 0.6);;">{{item.name}}</text>
							</view>
							<view style="flex: 1;float: right;margin-right: 1rpx;">
								<view style="float: right;margin-right: 1rpx;">
									<text
										style="font-weight: 500;color: rgba(206, 58, 58, 0.9);font-size: 32rpx;">{{item.cprice}}</text>
									<text
										style="font-weight: 500;color: rgba(206, 58, 58, 0.9);font-size: 28rpx;">元</text>
									<text style="color: rgba(42, 42, 42, 0.7) ;">起</text>
								</view>
				
							</view>
						</view>
						<view style="width: 100%;display: flex;" >
							<view style="width: 550rpx;">
								<text class="hide"
									style="margin-top: 15rpx; font-weight: 400;font-size: 28rpx;color: rgba(42, 42, 42, 0.7);">{{item.address}}</text>
				
							</view>
							<view style="flex: 1;">
								<text v-if="item.distance < 1000"
									style="float: right;margin-right: 1rpx;font-size: 28rpx;color: rgba(42, 42, 42, 0.7);font-weight: 400;margin-top: 15rpx;">{{item.distance}}m</text>
								<text v-else
									style="float: right;margin-right: 1rpx;font-size: 28rpx;color: rgba(42, 42, 42, 0.7);font-weight: 400;margin-top: 15rpx;">{{(item.distance/1000).toFixed(1)}}km</text>
							</view>
						</view>
					</view>
					<u-line color="#d5d5d5" margin="15rpx 0rpx" />
				</view>
				<view v-if="shownull2" style="margin-top: 30rpx;">
					<u-empty text="未搜索到影院信息" mode="list"></u-empty>
				</view>
			</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Config from '../../common/config.js';
	export default {
		data() {
			return {
				placeholder: "搜索电影",
				searchlist: [],
				yylist: [],
				VideoList: [],
				shownull1: false,
				shownull2: false,
				isSearch: false,
				keyword: "",
				iconstyle: {
					color: '#c7c7c7'
				},
				customStyle: {
					marginTop: '50%',
					color: '#FFFFFF',
					backgroundColor: '#EA5344',
					height: '60rpx'
				},
				type: "video"
			}
		},
		onLoad(pamar) {

			if (uni.getStorageSync("searchlist") != "") {
				this.searchlist = uni.getStorageSync("searchlist")
			}

			this.type = pamar.type
			if (this.type == 'video') {
				this.placeholder = '搜索电影'
			} else {
				this.placeholder = '搜索影院'
			}


		},
		filters: {
			formatT: function(value) {
				let T = value.split(' ')
				return T[0]
			},
			formatA: function(value) {
				let T = value.replace(/\//g, ' ')
				return T
			}
		},
		methods: {
			cancel() {
				this.isSearch = false
				this.yylist = []
				this.VideoList = []
				this.keyword = ""
			},
			delsearch() {
				uni.removeStorageSync("searchlist")
				this.searchlist = []
			},
			showToast() {
				this.$refs.uToast.show({
					title: '暂无预售',
					type: 'error'

				})
			},
			govcinema(item) {
				uni.navigateTo({
					url: '/pages/videocinema/videocinema?name=' + item.name + '&filmId=' + item.filmId
				});
			},
			goInfo(item) {
				uni.navigateTo({
					url: '../cinemainfo/cinemainfo?Id=' + item.id + '&name=' + item.name + '&address=' + item
						.address + '&coord=' + item.coord
				});
			},
			search(keyword) {
				let that = this;
				that.shownull1 = false
				that.shownull2 = false
				that.keyword = keyword
				let have = false;
				this.isSearch = true
				for (let s of this.searchlist) {
					if (s.keyword === this.keyword) {
						have = true
						break
					}
				}
				if (have == false) {
					that.searchlist.push({
						'keyword': that.keyword
					})
					uni.setStorageSync("searchlist", that.searchlist)
				}
				that.VideoList = []
				that.yylist = []
				if (that.type == "video") {
					uni.request({
						url: Config.ServerIP + '/movie/app/movie/filmShow/list',
						method: "POST",
						data: {
							cityId: Config.loaction.cityId,
							direction: "asc",
							pageNum: 1,
							pageSize: 100,
							searchValue: that.keyword
						},
						success: (res) => {

							that.VideoList = res.data.data;
							if (that.VideoList.length <= 0) {
								that.shownull1 = true
							}
						}
					})
				} else {
					uni.request({
						url: Config.ServerIP + '/movie/app/movie/filmShowCinema/film/city/list',
						method: "POST",
						data: {
							cityId: Config.loaction.cityId,
							direction: "asc",
							pageNum: 1,
							pageSize: 500,
							searchValue: that.keyword,
							latitude: Config.lat,
							orderBy: 'distance',
							longitude: Config.lon
						},
						success: (res) => {

							for (var i = 0; i < res.data.data.length; i++) {
								if (res.data.data[i].name.indexOf(that.keyword) > -1) {
									that.yylist.push(res.data.data[i])
								}
							}
							if (that.yylist.length <= 0) {
								that.shownull2 = true
							}

						}
					})
				}


			}
		}
	}
</script>

<style scoped lang="scss">
	@import url("@/static/css/index.css");

	page {
		background-color: #F5F5F5;
	}

	.hide {
		display: -webkit-box;
		/*设置为弹性盒子*/
		-webkit-line-clamp: 1;
		/*最多显示1行*/
		overflow: hidden;
		/*超出隐藏*/
		text-overflow: ellipsis;
		/*超出显示为省略号*/
		-webkit-box-orient: vertical;
		/* 从上向下垂直排列子元素。 */

	}

	.videoinfo {
		width: 390rpx;
		// display: -webkit-box;
		margin-bottom: 15rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		/* display: -webkit-box; */
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		flex-wrap: nowrap;
		word-break: break-all;
	}

	.wrap {
		padding: 20rpx;
	}

	.zzry {

		height: 110rpx;
		background-color: #EA5344;
		border-radius: 10rpx;
		position: absolute;
		z-index: 999;
		margin-top: -230rpx;
		margin-left: 20rpx;
		color: #FFFFFF;
		font-weight: 600;
		font-size: 32rpx;
		padding: 10rpx;
		width: fit-content;
		width: -webkit-fit-content;
		width: -moz-fit-content;
	}
</style>
